import React, { Fragment, useState } from 'react'
import { Button, Modal, Input, message } from 'antd';
import QRCode from 'qrcode'
import style from './index.module.scss'

const WQRCode = function () {

  const [visible, setVisible] = useState(false)
  const [codeData, setCodeData] = useState('')

  const inputChange = async (e: React.ChangeEvent<HTMLTextAreaElement>) => {
    try {
      const data = await QRCode.toDataURL(e.target.value, {
        color: {
          dark: '#00F',  // Blue dots
          light: '#0000' // Transparent background
        }
      })
      setCodeData(data)
    } catch(e) {
      message.error(e.message)
    }
  }

  return (
    <Fragment>
      <Button type="primary" size="small" onClick={() => setVisible(true)}>二维码生成</Button>
      <Modal
        footer={ null }
        title="二维码生成"
        visible={visible}
        onCancel={() => setVisible(false)}
      >
        <Input.TextArea onChange={inputChange} placeholder='请输入...'></Input.TextArea>
        <img className={ style['code-img'] } src={ codeData } alt=""/>
      </Modal>
    </Fragment>
  )
}

export default WQRCode